<template>
    <div class="header">
      <div class="header-left"><div class="iconfont back-icon">&#xe624;</div></div>
      <div class="header-input">
        <span class="iconfont">&#xe632;</span>
        <input type="search" placeholder="请输入城市/景点/游玩主题">
      </div>
      <div class="header-right">{{this.city}}<span class="iconfont arrow-icon">&#xe600;</span></div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        props:{
          city:String
        }
    }
</script>

<style scoped lang="stylus">
  /*@import "../../../assets/styles/stylus/varibles.styl"*/
 /* @import "~@/assets/styles/stylus/varibles.styl"*/
 @import "~styles/stylus/varibles.styl" //在webpack.base.conf.js中配置好路径后
    .header
        height:.86rem
        line-height:.86rem
        display:flex
        background:$bgColor
        color:#fff
        .header-left
          width:.64rem
          .back-icon
            text-align:center
            font-size .4rem
        .header-input
          flex:1
          height:.64rem
          line-height:.64rem
          margin-top:.12rem
          margin-left:.2rem
          padding-left:.2rem
          border-radius:.1rem
          color:#cccccc
          background-color:#ffffff
          input
            width:4.5rem
            display:inline-block
            margin-top:-0.1rem
        .header-right
          width:1.24rem
          text-align:center
          .arrow-icon
            font-size .24rem
</style>
